<template>
    <el-tabs tab-position="left">
        <el-tab-pane label="无需统计告警列表">
            <el-card shadow="always">
                <el-form :model="queryParams" :inline="true" label-width="100px">
                    <el-form-item label="告警主题：" prop="alarmTopic">
                        <el-input v-model="queryParams.alarmTopic" placeholder="请输入告警主题" clearable
                            style="width: 240px" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="Search" @click="listAlarmExclude">查询</el-button>
                        <el-button @click="unsetQueryForm"><el-icon>
                                <RefreshRight />
                            </el-icon>重置</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
            <el-card shadow="always" style="margin-top: 10px;">
                <el-row>
                    <el-button type="primary" icon="Plus" @click="showAddAlarmExclude">新增</el-button>
                </el-row>
                <el-table :data="alarmExcludeData" style="width: 100%;margin-top: 5px;" height="calc(100vh - 300px)">
                    <el-table-column fixed prop="id" label="ID" width="150" align="center" />
                    <el-table-column prop="alarmTopic" label="告警主题" align="center" />
                    <el-table-column fixed="right" label="操作" min-width="50" align="center">
                        <template #default="scope">
                            <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
        </el-tab-pane>
        <el-tab-pane label="网络规模配置">
            <el-card shadow="always">
                <el-table :data="networkScaleData" style="width: 100%;margin-top: 5px;" height="calc(100vh - 300px)">
                    <el-table-column prop="county" label="区县" width="150" align="center" />
                    <el-table-column prop="lteScale" label="4G规模" align="center" sortable />
                    <el-table-column prop="nrScale" label="5G规模" align="center" sortable />
                    <el-table-column label="合计" align="center" sortable>
                        <template #default="scope">
                            {{ scope.row.lteScale + scope.row.nrScale }}
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" min-width="50" align="center">
                        <template #default="scope">
                            <el-button link type="primary" icon="Edit" @click="handleEdit(scope.row)">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
        </el-tab-pane>
        <el-tab-pane label="退服告警类型列表">
            <el-card shadow="always">
                <el-form :model="exitQueryParams" :inline="true" label-width="100px">
                    <el-form-item label="告警主题：" prop="alarmTopic">
                        <el-input v-model="exitQueryParams.alarmTopic" placeholder="请输入告警主题" clearable
                            style="width: 240px" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="Search" @click="listExitAlarmTypeList">查询</el-button>
                        <el-button @click="unsetQueryForm"><el-icon>
                                <RefreshRight />
                            </el-icon>重置</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
            <el-table :data="exitAlarmData" style="width: 100%;margin-top: 5px;" height="calc(100vh - 300px)">
                <el-table-column fixed prop="id" label="ID" width="150" align="center" />
                <el-table-column prop="alarmTopic" label="告警类型" align="center" />
                <el-table-column fixed="right" label="操作" min-width="50" align="center">
                    <template #default="scope">
                        <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-tab-pane>

    </el-tabs>
    <el-dialog v-model="addDialogVisible" title="新增剔除告警" width="600" @closed="closeAddDialog">
        <el-form :inline="true" :model="addForm" label-width="200px">
            <el-form-item label="告警标题">
                <el-input v-model="addForm.alarmTopic" style="width: 200px" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="doAddAlarmExclude">
                    确定
                </el-button>
                <el-button @click="addDialogVisible = false">取消</el-button>
            </div>
        </template>
    </el-dialog>

    <el-dialog v-model="networkScaleDialogVisible" title="编辑网络规模配置" width="600" @closed="closeEditDialog">
        <el-form :inline="true" :model="editForm" :rules="editRules" label-width="200px">
            <el-form-item label="区县" prop="county">
                <el-input v-model="editForm.county" style="width: 200px" readonly />
            </el-form-item>
            <el-form-item label="4G规模" prop="lteScale">
                <el-input-number v-model="editForm.lteScale" style="width: 200px" />
            </el-form-item>
            <el-form-item label="5G规模" prop="nrScale">
                <el-input-number v-model="editForm.nrScale" style="width: 200px" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="doEditNetworkScale">
                    确定
                </el-button>
                <el-button @click="networkScaleDialogVisible = false">取消</el-button>
            </div>
        </template>
    </el-dialog>

</template>

<script setup>
import { ref } from "vue";
import { queryAlarmExcludeList, addAlarmExclude, deleteAlarmExclude, queryNetworkScaleList, updateNetworkScale, queryExitAlarmTypeList } from '@/api/biz/maintenance';
import { ElMessage } from 'element-plus'

const { proxy } = getCurrentInstance();
const alarmExcludeData = ref([])
const addDialogVisible = ref(false)
const queryParams = ref([])
const addForm = ref({})
const networkScaleData = ref([])
const networkScaleDialogVisible = ref(false)
const editForm = ref({})
const exitAlarmData = ref([])
const exitQueryParams = ref({})

const editRules = {
    lteScale: [{ required: true, trigger: "blur", message: "请输入4G网络规模" }],
    nrScale: [{ required: true, trigger: "blur", message: "请输入5G网络规模" }],
};


function listAlarmExclude() {
    let param = { alarmTopic: queryParams.value.alarmTopic }
    queryAlarmExcludeList(param).then(res => {
        alarmExcludeData.value = res.data
    })
}

function doAddAlarmExclude() {
    let form = {
        alarmTopic: addForm.value.alarmTopic,
    }
    addAlarmExclude(form).then(res => {
        ElMessage.success('操作成功！')
        addDialogVisible.value = false
        listAlarmExclude()
    })
}

function handleDelete(row) {
    let param = {
        id: row.id
    }
    proxy.$modal.confirm('是否确认删除ID为"' + row.id + '"的数据项？').then(function () {
        return deleteAlarmExclude(param);
    }).then(() => {
        listAlarmExclude()
        ElMessage.success('操作成功！')
    }).catch(() => { });
}

function listExitAlarmTypeList() {
    let param = {}
    queryExitAlarmTypeList(param).then(res => {
        exitAlarmData.value = res.data
    })
}

function closeAddDialog() {
    addForm.value = {}
    addDialogVisible.value = false
}

function unsetQueryForm() {
    queryParams.value = {
    }
}

function showAddAlarmExclude() {
    addDialogVisible.value = true
}

function listNetworkScaleList() {
    let param = {}
    queryNetworkScaleList(param).then(res => {
        networkScaleData.value = res.data
    })
}

function handleEdit(data) {
    networkScaleDialogVisible.value = true
    editForm.value = data
}

function closeEditDialog() {
    editForm.value = {}
}

function doEditNetworkScale() {
    let param = {}
    param.county = editForm.value.county
    param.lteScale = editForm.value.lteScale
    param.nrScale = editForm.value.nrScale
    updateNetworkScale(param).then(res => {
        ElMessage.success('操作成功！')
        networkScaleDialogVisible.value = false
        listNetworkScaleList()
    })
}




listAlarmExclude()
listNetworkScaleList()
listExitAlarmTypeList()

</script>